<template>
  <div>
    <!-- <Modal v-model="detailPop" width="50" :mask-closable="false" class-name="vertical-center-modal"
      @on-visible-change="OnVisibleChange"> -->
    <Drawer title="" placement="bottom" :closable="true" class-name="vertical-center-modal" v-model="detailPop"
      height="90" @on-visible-change="OnVisibleChange">
      <div slot="header" class="head-title">{{ $t("event.buy_item") }}</div>
      <black-good-info v-if="valueToPassIsReady" :dataInfo="infoList" @addCartStatus="addCartStatus"
        @updateMet="updateMet" :isSpuLock="isSpuLock"></black-good-info>
      <!-- </Modal> -->
    </Drawer>
  </div>
</template>
<script>
import { bigTimes } from "@/common/digital-computation";
import { doubleCartAdd } from "@/api/activity";
import { queryWeiDianProductDetail, queryProductDetail } from "@/api/product";
import { mapState } from "vuex";
import { debounce } from "@/common/common";
import BlackGoodInfo from './black-good-info.vue';
export default {
  components: { BlackGoodInfo },
  data() {
    return {
      bigTimes,
      currentSelectInfo: {
        price: "0",
        priceCNY: "0",
        image: "",
        originalPriceCNY: "0",
        originalPrice: "0",
      },
      detailPop: false,
      form: {
        source: 2,
        remarks: "",
      },
      agree: false,
      search: {
        channel: "WEIDIAN",
      },
      infoList: {},
      valueToPassIsReady: false,
      isSpuLock: 0
    };
  },
  computed: {
    ...mapState({
      config: (state) => state.config.config,
      userCurrency: (state) => {
        return state.user.userCurrency.code;
      },
      userInfo: (state) => {
        //  ENABLE 老用户，DISABLE 新用户
        return state.user.userInfo.orderFlag == "DISABLE";
      },
    }),
  },
  watch: {
    // 确保传给组件的infoList有值
    infoList(newValue) {
      if (newValue !== null) {
        this.valueToPassIsReady = true;
      }
    },
  },
  methods: {
    // 加购成功，关闭弹框
    addCartStatus() {
      this.detailPop = false; //关闭弹框
      this.$emit("addSuccess"); //加购成功，父组件刷新购物车数量
    },
    getDetail(info) {
      this.isSpuLock = info.spuLock;//是否开锁 0开1锁
      this.search.spuNo = info.spuNo;
      this.search.channel = info.channel;
      queryWeiDianProductDetail(this.search).then((res) => {
        this.infoList = res.result;
        this.$nextTick(() => {
          this.infoList.description = this.infoList.description.replace(
            /\s*href="[^"]*"/gi,
            ""
          );
          this.form.channel = this.infoList.channel;
          this.form.expressFee = this.infoList.expressFee; // 国内运费
          this.form.quantity =
            this.infoList.startQuantity < 1 ? 1 : this.infoList.startQuantity; // 商品数量(计算金额用)，必填
          this.form.spuNo = this.infoList.spuNo; // SPU产品编号
          this.detailPop = true;
        })
      });
    },
    OnVisibleChange(value) {
      if (value == false) {
        this.valueToPassIsReady = false;
      }
    },
    getDisposePrice(type) {
      let val = this.currentSelectInfo[type]
        ? this.currentSelectInfo[type]
        : this.infoList[type]
          ? this.infoList[type]
          : this.infoList.saleInfo.priceRangeList &&
            this.infoList.saleInfo.priceRangeList.length > 0
            ? this.infoList.saleInfo.priceRangeList[0][type]
            : this.infoList.saleInfo.priceRanges &&
              this.infoList.saleInfo.priceRanges.length > 0
              ? this.infoList.saleInfo.priceRanges[0][type]
              : 0;
      return val || 0;
    },
    updateMet() {
      // 强制刷新
      this.getQueryProductDetail(true);
    },
    getQueryProductDetail(force) {
      // 商品详情
      queryProductDetail({
        spuNo: this.id,
        refresh: force ? 1 : 0,
        channel: this.channel
      }).then((res) => {
        this.infoList = res.result;
        this.infoList.description = this.dataInfo.description.replace(/\s*href="[^"]*"/gi, '');
      }).catch(() => {
      })
    }
  },
};
</script>

<style lang="less" scoped>
:deep(.ivu-drawer-close) {
  .ivu-icon-ios-close {
    font-size: 48px;
    font-weight: 600;
  }
}

:deep(.ivu-drawer-content) {
  border-radius: 16px 16px 0 0;
}

:deep(.ivu-modal-content) {
  border-radius: 18px;
  position: relative;

  &::before {
    /* 1 */
    display: block;
    content: "";
    border-radius: 18px;
    border: 8px solid transparent;
    background: linear-gradient(271deg,
        rgba(254, 49, 97, 1),
        rgba(53, 231, 207, 1)) border-box;
    /* 2 */
    -webkit-mask: linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    /* 3 */
    -webkit-mask-composite: xor;
    /* 4 */
    mask-composite: exclude;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

:deep(.ivu-modal-header) {
  border: none;
  padding: 28px 32px;
}

:deep(.ivu-modal-body) {
  padding: 0 32px;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 0 32px 28px 32px;
  position: relative;
  z-index: 9;
}

:deep(.ivu-modal-close) {
  position: absolute;
  top: 20px;
  right: 26px;
}

:deep(.ivu-modal-close .ivu-icon-ios-close) {
  color: #333333;
  font-size: 64px;
  font-weight: 800;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .big-img {
    width: 320px;
    height: 320px;
    border-radius: 10px 10px 10px 10px;
    border: 4px solid #ffffff;
  }

  .head-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32px;
    color: #1e1714;
    line-height: 38px;
  }

  .detail-content {
    position: relative;
    z-index: 9;

    .name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #1e1714;
      line-height: 23px;
    }

    .info-sty {
      display: flex;
      gap: 24px;
      margin-top: 18px;

      .left-sty {
        width: 120px;
        height: 120px;
        border-radius: 10px 10px 10px 10px;
        background: #ffffff;
        cursor: pointer;
      }

      .right-info {
        flex: 1;

        .label-text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #fe3161;
          line-height: 18px;
          margin: 8px 0;
        }

        .price-num {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 32px;
          color: #fe3161;
          line-height: 38px;

          .price-num {
            font-size: 42px;
            line-height: 42px;
          }

          span {
            font-size: 20px;
            line-height: 23px;
          }
        }

        .right-label {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #9a27e9;
          line-height: 18px;
          margin: 8px 0 18px 0;
        }

        .right-price {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 17px;
          color: #9a27e9;
          line-height: 20px;
          text-decoration: line-through;
        }

        .tips-text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #74767f;
          line-height: 19px;
          margin-top: 9px;
        }
      }
    }

    .info-select {
      // height: 200px;
      // overflow-y: scroll;

      .scroll-sty {
        height: 430px;
        overflow-y: scroll;
        overflow-x: hidden;
        margin-bottom: 24px;

        .tips-info {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #aeb0b9;
          line-height: 22px;
          margin-top: 24px;
        }

        .type-item {
          margin-top: 24px;

          .type-label {
            display: block;
            margin-right: 6px;
            margin-bottom: 6px;
            color: @t-title-color;
            font-size: 19px;
            font-weight: 500;
          }

          .textarea {
            margin-bottom: 16px;

            &:deep(.ivu-input) {
              font-size: 19px;
              border-radius: 11px;
              margin-top: 16px;
              padding: 16px;
            }
          }
        }

        .order-num {
          display: flex;
          flex-direction: column;
          margin-top: 24px;

          .type-label {
            display: flex;
            align-items: center;
            margin-bottom: 0px;
            height: 32px;
            margin-bottom: 16px;
            font-size: 19px;
            font-weight: 500;
          }

          .left {
            .left-content {
              display: flex;
              align-items: center;
            }

            .min-quantity {
              color: @t-text-color;
              font-size: 16px;
              display: block;
              margin-top: 16px;
            }
          }

          .amount-sale {
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 16px;
            color: #afafaf;
            line-height: 22px;
            margin-left: 32px;
          }
        }
      }
    }
  }

  .footer-sty {
    display: flex;
    justify-content: space-between;

    :deep(.ivu-checkbox) {
      margin-right: 10px;
    }

    :deep(.ivu-checkbox-default) {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #1e1714;
      line-height: 22px;
    }

    .flex-sty {
      display: flex;
      align-items: center;
      gap: 28px;

      .add-cart {
        padding: 14px 45px;
        background: #1e1714;
        border-radius: 10px 10px 10px 10px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #ffffff;
        line-height: 23px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 20px;

        .cart-add {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}
</style>
